<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		 </view>
		<view class='box' v-else>
			<view class="box_list" v-for="(v,k) in list" :key="k"  @click="onNav" :data-id="v.d_id">
				
				<view class="l_head">
					<view class="img"><image :src="v.d_userIcon"></image></view>
					<view class="cont"> 
						<view class="c_head">
							<view class='name'>
								<text class="hg" v-if="v.d_supremeTime==1">{{v.d_userNickname}}</text>
								<text class="hy" v-else-if="v.d_memberTime==1">{{v.d_userNickname}}</text>
								<text v-else>{{v.d_userNickname}}</text>
								<image src="../../static/image/hg.png" v-if="v.d_supremeTime==1"></image>
								<image src="../../static/image/hy.png" v-else-if="v.d_memberTime==1"></image>
							</view>
							<view class='time'>{{v.d_createTime}}</view>
						</view>
						<view class="c_bot">
							<text class='age' v-if="v.d_age">{{v.d_age}}岁</text>
							<text class='address'>{{v.d_addres}}</text>
						</view>
					</view>
				</view>
				<view class="l_cont">
					<view class="l_text">{{v.d_content}}</view>
					<view class="l_images">
						<image v-for="(n,m) in v.d_images" :key="m" :src="n"></image>
					</view>
					<view class="l_tags">
						<view class="tag" v-if="v.d_topic">
							<u-tag v-for="(n,m) in v.d_topic" :key="m" :text="'#'+n+'#'" type='info' shape='circle'/>
						</view>
					</view>
				</view>
				<view class="l_num">
					<view>
						<image src="../../static/dynamic_icon/zan.png"></image>
						<text>{{v.d_goodNum}}</text>
					</view>
					<view>
						<image src="../../static/dynamic_icon/comment.png"></image>
						<text>{{v.d_commentNum}}</text>
					</view>
				</view>
				<view class='l_comment'>
					<view v-for="(n,m) in v.comment" :key="m">{{n.c_userNickname}} : {{n.c_content}}</view>
					<view class='img'><image src="../../static/dynamic_icon/more.png"></image></view>
				</view>

			</view>
			
			<view v-if="showError!=''" class='empty' style="background-color: #fff;">
				<u-loading mode="circle" v-if='show' size="50"></u-loading>
				<text>{{showError}}</text>
			</view>
			
			<view class='hair'>
				<!-- {{ user }} -->
				<view v-if="store.userInfo" @click="onHair">
					<image src="../../static/dynamic_icon/hair.png"></image>
				</view>
				<view v-else @click='onLogin_not'>
					<image src="../../static/dynamic_icon/hair.png"></image>
				</view>
			</view>
		</view>
		
		<u-mask :show="imageShow" @click="imageShow = false">
			<view class='image'>
				<image :src="image"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				user:null,
				list:[],
				page:1,
				allpage:1,
				imageShow:false,
				image:'',
				show:true,
				showError:'',
				store:null
			}
		},
		onLoad(){
			this.list=[];
			
			this.store=this.$store.state;
			
			console.log(this.store)
			
			this.onList();
		},
		onReachBottom(){
			var page=this.page;
			
			if(page<this.allpage){
				this.showError='加载中...';
				page++;
			}else{
				this.showError='暂无更多动态了~';
				return;
			}
			
			this.onList(page);
		},
		onPullDownRefresh() {
			this.show=true;
			
			this.list=[];
			
			this.onList(1);
		},
		methods: {
			onNav(e){
				var id=e.currentTarget.dataset.id;
				
				uni.navigateTo({
				    url: '/pages/dynamic/dynamicView?id='+id
				});
			},
			onHair(){
				var real=this.$store?this.$store.state.userInfo.realName:0;
				
				if(real!=1){
					return this.$refs.uToast.show({
						title: '您还未实名认证',
						type:'default'
					});
				}
				
				uni.navigateTo({
					url:'/pages/dynamic/dynamicRelease'
				})
			},
			onImage(e){
				var src=e.currentTarget.dataset.url;
				
				this.image=src;
				
				this.imageShow=true;
			},
			onList(page=1){
				var that=this;
				
				this.$request({
					url:"/dynamic/list",
					data:{page:page},
					success(res){
						if(res.data.code==1){
							var data=res.data.data;
							
							that.user=data.user;
							
							for(var i in data.list){
								that.list.push(data.list[i]);
							}
							
							that.page=data.page;
							
							that.allpage=data.allpage;
							
							that.show=false;
							
							that.showError='';
							
						}else{
							that.show=false;
							
							that.showError=res.data.msg;
						}
					},
					fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					},
					complete(){
						uni.stopPullDownRefresh();
					}
				})
			},
			onLogin_not(){
				uni.showModal({
				    title: '登录提示',
				    content: '您还未登录,是否前往登录',
				    success: function (res) {
				        if (res.confirm) {
							uni.reLaunch({
							    url: '/pages/login/login'
							});
				        }
				    }
				});
			}
		}
	}
</script>

<style scoped src="../../static/css/dynamic.css">
	
</style>

<style scoped>
	.image{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.image image{
		height:650rpx;
	}
</style>
